---
title: Reanimated
description: Sync animations with your sheet using Reanimated.
keywords: [bottom sheet, react-native-reanimated, reanimated, animations]
---

import reanimated from './reanimated.gif'

`TrueSheet` has first-class support for [react-native-reanimated v4](https://docs.swmansion.com/react-native-reanimated/).

<img alt="reanimated" src={reanimated} width="300"/>

:::info Requirements
- `react-native-reanimated`: ^4.0.0
- `react-native-worklets` (peer dependency of Reanimated v4)
:::

## How?

### 1. Add the Provider

Manages shared values for Reanimated integration.

```tsx
import { ReanimatedTrueSheetProvider } from '@lodev09/react-native-true-sheet/reanimated'

function App() {
  return (
    <ReanimatedTrueSheetProvider>
      <YourApp />
    </ReanimatedTrueSheetProvider>
  )
}
```

### 2. Use ReanimatedTrueSheet

Animated sheet component that syncs position automatically with all props from [`TrueSheet`](/reference/configuration).

```tsx
import { type TrueSheet } from '@lodev09/react-native-true-sheet'
import { ReanimatedTrueSheet } from '@lodev09/react-native-true-sheet/reanimated'

function MyScreen() {
  const sheetRef = useRef<TrueSheet>(null)

  return (
    <ReanimatedTrueSheet
      ref={sheetRef}
      detents={[0.3, 0.6, 1]}
      initialDetentIndex={1}
    >
      <Text>Sheet Content</Text>
    </ReanimatedTrueSheet>
  )
}
```

:::info
Note that the `onPositionChange` prop event now runs on the UI thread (worklet). If you override this prop, make sure to add the `'worklet'` directive to your handler.
:::

### 3. Access Animated Values

Use the `useReanimatedTrueSheet` hook to access the sheet's animated values.

```tsx
import { useReanimatedTrueSheet } from '@lodev09/react-native-true-sheet/reanimated'
import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'

function MyComponent() {
  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet()

  // Example: Move component based on sheet position
  const positionStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: -animatedPosition.value }]
  }))

  // Example: Fade in as sheet expands from index 0 to 1
  const opacityStyle = useAnimatedStyle(() => ({
    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1], Extrapolation.CLAMP)
  }))

  return (
    <Animated.View style={[positionStyle, opacityStyle]}>
      <Text>This moves and fades with the sheet</Text>
    </Animated.View>
  )
}
```

#### Available Values

| Value | Type | Description |
| - | - | - |
| `animatedPosition` | `SharedValue<number>` | The current Y position of the sheet relative to the screen. |
| `animatedIndex` | `SharedValue<number>` | The current detent index as a continuous float. Interpolates smoothly between detent indices during drag (e.g., `0.5` when halfway between index 0 and 1). |
| `animatedDetent` | `SharedValue<number>` | The current detent value (0-1 fraction of screen height). Interpolates smoothly between detent values as the sheet is dragged. |

## Examples

See the [example app](https://github.com/lodev09/react-native-true-sheet/tree/main/example) for complete implementations.
